<!DOCTYPE html>
<html>
<head>
    <title>Spring-Mass System</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="500"></canvas>

    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#000';
        ctx.fillStyle = '#000';
        ctx.font = '24px "Times New Roman"';

        // Center of the diagram
        const centerX = canvas.width / 2;

        // 1. Draw the fixed support (ceiling)
        const supportY = 60;
        const supportWidth = 120;
        ctx.beginPath();
        ctx.moveTo(centerX - supportWidth / 2, supportY);
        ctx.lineTo(centerX + supportWidth / 2, supportY);
        ctx.stroke();

        // Draw the hatching for the support
        const hatchLength = 20;
        const hatchAngle = Math.PI / 4;
        for (let i = 0; i <= 6; i++) {
            const x = centerX - supportWidth / 2 + (i * supportWidth / 6);
            ctx.beginPath();
            ctx.moveTo(x, supportY);
            ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), supportY - hatchLength * Math.sin(hatchAngle));
            ctx.stroke();
        }

        // 2. Draw the spring
        let currentY = supportY;
        
        // Top connector line
        ctx.beginPath();
        ctx.moveTo(centerX, currentY);
        currentY += 25;
        ctx.lineTo(centerX, currentY);
        ctx.stroke();

        // Spring coils
        const springHeight = 100;
        const numCoils = 4;
        const coilRadius = 25;
        const yStep = springHeight / (2 * numCoils);

        for (let i = 0; i < numCoils; i++) {
            // Draw one full coil (two arcs)
            ctx.beginPath();
            ctx.arc(centerX, currentY + yStep, coilRadius, Math.PI, 0, false);
            ctx.stroke();
            currentY += yStep;
            
            ctx.beginPath();
            ctx.arc(centerX, currentY + yStep, coilRadius, 0, Math.PI, false);
            ctx.stroke();
            currentY += yStep;
        }
        
        // Draw the label 'k' for the spring
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('k', centerX + coilRadius + 10, supportY + 25 + springHeight / 2);

        // 3. Draw the bottom connector and mass m1
        ctx.font = '24px "Times New Roman"'; // Reset font
        
        // Connector line to m1
        let bottomOfSpringY = currentY;
        ctx.beginPath();
        ctx.moveTo(centerX, bottomOfSpringY);
        const topOfM1Y = bottomOfSpringY + 25;
        ctx.lineTo(centerX, topOfM1Y);
        ctx.stroke();
        
        // Mass m1 block
        const blockWidth = 70;
        const blockHeight = 50;
        const m1_X = centerX - blockWidth / 2;
        const m1_Y = topOfM1Y;
        ctx.strokeRect(m1_X, m1_Y, blockWidth, blockHeight);
        
        // Label for m1
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('m₁', centerX, m1_Y + blockHeight / 2);

        // 4. Draw the connector and mass m2
        // Connector line from m1 to m2
        const bottomOfM1Y = m1_Y + blockHeight;
        ctx.beginPath();
        ctx.moveTo(centerX, bottomOfM1Y);
        const topOfM2Y = bottomOfM1Y + 30;
        ctx.lineTo(centerX, topOfM2Y);
        ctx.stroke();

        // Mass m2 block
        const m2_X = centerX - blockWidth / 2;
        const m2_Y = topOfM2Y;
        ctx.strokeRect(m2_X, m2_Y, blockWidth, blockHeight);

        // Label for m2
        ctx.fillText('m₂', centerX, m2_Y + blockHeight / 2);

        // 5. Draw the caption
        const captionY = m2_Y + blockHeight + 60;
        ctx.font = '28px "SimSun"'; // Use a font that supports Chinese characters
        ctx.fillText('力图 3.1.1', centerX, captionY);
    </script>
</body>
</html>